    <div class="container">
      <div class="bg-putih">
      <!--
        <div class="jdl-page">
          Tabel, Tombol dan Paging
          <div class="clearfix"></div>
        </div>
        
        <?php echo display_flash(); ?>

        <div class="row">
          <div class="col-xs-8">
            <div class="btn-group btn-group-sm" role="group" aria-label="...">
              <a href="#" class="btn btn-primary"><i class="fa fa-plus"></i>&nbsp;Tambah Data</a>
              <a href="#" class="btn btn-warning"><i class="fa fa-print"></i>&nbsp;Cetak Data</a>
            </div>
          </div>
          <div class="col-xs-4">
            <div class="input-group input-group-sm">
              <input type="text" class="form-control required email" placeholder="Pencarian..." title="Masukkan kata kunci">
              <span class="input-group-btn">
                <button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-search"></span></button>
              </span>
            </div>
          </div>
        </div>
        <table class="table table-striped table-hover margintop20">
          <thead>
              <tr>
                  <th width="4%" style="text-align:center;">No</th>
                  <th>Judul 1</th>
                  <th>Judul 2</th>
                  <th>Judul 3</th>
                  <th>Judul 4</th>
              </tr>
          </thead>
          <tbody>
              <tr>
                  <td align="center">1</td>
                  <td>Lorem ipsum</td>
                  <td>Lorem ipsum</td>
                  <td>Lorem ipsum</td>
                  <td>
                  Lorem ipsum
                  <span class="pull-right">
                    <a href="#" class="label label-success" title="Edit">Edit</a>
                    <a href="#" class="label label-default" title="Hapus" onClick="return confirm('Yakin ingin menghapus data ini?')">Hapus</a>
                  </span>
                  </td>
              </tr>
              <tr>
                  <td align="center">1</td>
                  <td>Lorem ipsum</td>
                  <td>Lorem ipsum</td>
                  <td>Lorem ipsum</td>
                  <td>
                  Lorem ipsum
                  <span class="pull-right">
                    <a href="#" class="label label-success" title="Edit">Edit</a>
                    <a href="#" class="label label-default" title="Hapus" onClick="return confirm('Yakin ingin menghapus data ini?')">Hapus</a>
                  </span>
                  </td>
              </tr>
              <tr>
                  <td align="center">1</td>
                  <td>Lorem ipsum</td>
                  <td>Lorem ipsum</td>
                  <td>Lorem ipsum</td>
                  <td>
                  Lorem ipsum
                  <span class="pull-right">
                    <a href="#" class="label label-success" title="Edit">Edit</a>
                    <a href="#" class="label label-default" title="Hapus" onClick="return confirm('Yakin ingin menghapus data ini?')">Hapus</a>
                  </span>
                  </td>
              </tr>
              <tr>
                  <td align="center">1</td>
                  <td>Lorem ipsum</td>
                  <td>Lorem ipsum</td>
                  <td>Lorem ipsum</td>
                  <td>
                  Lorem ipsum
                  <span class="pull-right">
                    <a href="#" class="label label-success" title="Edit">Edit</a>
                    <a href="#" class="label label-default" title="Hapus" onClick="return confirm('Yakin ingin menghapus data ini?')">Hapus</a>
                  </span>
                  </td>
              </tr>
          </tbody>
        </table>

        <center style="margin-top:-30px;">
          <ul class="pagination">
            <li class="disabled"><a href="#"><i class="fa fa-chevron-left"></i></a></li>

            <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>

            <li><a href="#"><i class="fa fa-chevron-right"></i></a></li>
          </ul>
        </center>

        <div class="clearfix"></div>
      </div>
    </div> 

    

    <div class="container">
      <div class="bg-putih">

        <div class="jdl-page">
          Form
          <div class="clearfix"></div>
        </div>

        <form class="form-horizontal" role="form">
          <div class="form-group">
            <label class="col-xs-2 control-label">Text</label>
            <div class="col-xs-10">
              <input type="text" class="form-control input-sm" placeholder="Email">
            </div>
          </div>
          <div class="form-group">
            <label class="col-xs-2 control-label">Password</label>
            <div class="col-xs-10">
              <input type="password" class="form-control input-sm" placeholder="Password">
            </div>
          </div>
          <div class="form-group">
            <label class="col-xs-2 control-label">Select Option</label>
            <div class="col-xs-10">
                <select class="form-control input-sm">
                  <option>1</option>
                  <option>2</option>
                  <option>3</option>
                  <option>4</option>
                  <option>5</option>
                </select>
            </div>
          </div>
          <div class="form-group">
            <label class="col-xs-2 control-label">Textarea</label>
            <div class="col-xs-10">
              <textarea class="form-control input-sm" rows="3" id="text">
              <p><strong>Cara menggunakan Text Editor ini</strong></p>
              <p>Terlebih dahulu panggil js dari CKEditor di Controller, dengan perintah</p>
              <code>$this->layout->set_include('js', 'themes/general/bundle/ckeditor/ckeditor.js', 'header');</code>
              
              <p>Untuk lebih jelasnya, buka controller dan view ini.</p>
              </textarea>
              

            </div>
          </div>
          <div class="form-group">
            <label class="col-xs-2 control-label">Checkbox</label>
            <div class="col-xs-10">
                <div class="checkbox checkbox-inline checkbox-success">
                    <input type="checkbox" class="styled" id="inlineCheckbox1" value="option1">
                    <label for="inlineCheckbox1"> Inline One </label>
                </div>
                <div class="checkbox checkbox-inline checkbox-warning">
                    <input type="checkbox" class="styled" id="inlineCheckbox2" value="option1" checked>
                    <label for="inlineCheckbox2"> Inline Two </label>
                </div>
                <div class="checkbox checkbox-inline checkbox-danger">
                    <input type="checkbox" class="styled" id="inlineCheckbox3" value="option1">
                    <label for="inlineCheckbox3"> Inline Three </label>
                </div>
            </div>
          </div>
          <div class="form-group">
            <label class="col-xs-2 control-label">Radio</label>
            <div class="col-xs-10">
                <div class="radio radio-inline radio-info">
                    <input type="radio" id="inlineRadioA1" value="option" name="radioInlineA" checked>
                    <label for="inlineRadioA1"> Inline One </label>
                </div>
                <div class="radio radio-inline radio-primary">
                    <input type="radio" id="inlineRadioA2" value="option" name="radioInlineA">
                    <label for="inlineRadioA2"> Inline Two </label>
                </div>
            </div>
          </div>
          <div class="form-group">
            <label class="col-xs-2 control-label">File input</label>
            <div class="col-xs-10">
                <input type="file">
                <p class="help-block">Example block-level help text here.</p>
            </div>
          </div>
          <div class="form-group">
            <div class="col-xs-offset-2 col-xs-10">
              <button type="submit" class="btn btn-primary btn-sm">Simpan</button>
              <button type="reset" class="btn btn-default btn-sm">Reset</button>
            </div>
          </div>
        </form>

        <div class="clearfix"></div>
      </div>
    </div> 

    <div class="container">
      <div class="bg-putih">

        <div class="jdl-page">
          Alerts
          <div class="clearfix"></div>
        </div>
        
        <code>set_flash('success', 'Alert Sukses')</code><br/><br/>
        <div class="alert alert-success">
          Alerts Sukses
          <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
        </div>

        <hr/>

        <code>set_flash('info', 'Alert Info')</code><br/><br/>
        <div class="alert alert-info">
          Alerts Info
          <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
        </div>

        <hr/>

        <code>set_flash('warning', 'Alert Warning')</code><br/><br/>
        <div class="alert alert-warning">
          Alerts Warning
          <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
        </div>

        <hr/>

        <code>set_flash('danger', 'Alert Danger')</code><br/><br/>
        <div class="alert alert-danger">
          Alerts Danger
          <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
        </div>

        <div class="clearfix"></div>
      </div>
    </div> 

    <div class="container">
      <div class="bg-putih">

        <div class="jdl-page">
          Radio and Checkbox
          <div class="clearfix"></div>
        </div>
        
        <div class="row">
        <div class="col-xs-5">
            <fieldset>
                <legend>
                    Basic
                </legend>
                <p>
                    Supports bootstrap brand colors: <code>.checkbox-primary</code>, <code>.checkbox-info</code> etc.
                </p>
                <div class="checkbox">
                    <input id="checkbox1" class="styled" type="checkbox">
                    <label for="checkbox1">
                        Default
                    </label>
                </div>
                <div class="checkbox checkbox-primary">
                    <input id="checkbox2" class="styled" type="checkbox" checked>
                    <label for="checkbox2">
                        Primary
                    </label>
                </div>
                <div class="checkbox checkbox-success">
                    <input id="checkbox3" class="styled" type="checkbox">
                    <label for="checkbox3">
                        Success
                    </label>
                </div>
                <div class="checkbox checkbox-info">
                    <input id="checkbox4" class="styled" type="checkbox">
                    <label for="checkbox4">
                        Info
                    </label>
                </div>
                <div class="checkbox checkbox-warning">
                    <input id="checkbox5" type="checkbox" class="styled" checked>
                    <label for="checkbox5">
                        Warning
                    </label>
                </div>
                <div class="checkbox checkbox-danger">
                    <input id="checkbox6" type="checkbox" class="styled" checked>
                    <label for="checkbox6">
                        Check me out
                    </label>
                </div>
                <p>Checkboxes without label text</p>
                <div class="checkbox">
                    <input type="checkbox" class="styled" id="singleCheckbox1" value="option1" aria-label="Single checkbox One">
                    <label></label>
                </div>
                <div class="checkbox checkbox-primary">
                    <input type="checkbox" class="styled styled-primary" id="singleCheckbox2" value="option2" checked aria-label="Single checkbox Two">
                    <label></label>
                </div>
                <p>Inline checkboxes</p>
                <div class="checkbox checkbox-inline">
                    <input type="checkbox" class="styled" id="inlineCheckbox1" value="option1">
                    <label for="inlineCheckbox1"> Inline One </label>
                </div>
                <div class="checkbox checkbox-success checkbox-inline">
                    <input type="checkbox" class="styled" id="inlineCheckbox2" value="option1" checked>
                    <label for="inlineCheckbox2"> Inline Two </label>
                </div>
                <div class="checkbox checkbox-inline">
                    <input type="checkbox" class="styled" id="inlineCheckbox3" value="option1">
                    <label for="inlineCheckbox3"> Inline Three </label>
                </div>
            </fieldset>
        </div>
        <div class="col-xs-4">
            <fieldset>
                <legend>
                    Circled
                </legend>
                <p>
                    <code>.checkbox-circle</code> for roundness.
                </p>
                <div class="checkbox checkbox-circle">
                    <input id="checkbox7" class="styled" type="checkbox">
                    <label for="checkbox7">
                        Simply Rounded
                    </label>
                </div>
                <div class="checkbox checkbox-info checkbox-circle">
                    <input id="checkbox8" class="styled" type="checkbox" checked>
                    <label for="checkbox8">
                        Me too
                    </label>
                </div>
            </fieldset>
        </div>
        <div class="col-xs-3">
            <fieldset>
                <legend>
                    Disabled
                </legend>
                <p>
                    Disabled state also supported.
                </p>
                <div class="checkbox">
                    <input class="styled" id="checkbox9" type="checkbox" disabled>
                    <label for="checkbox9">
                        Can't check this
                    </label>
                </div>
                <div class="checkbox checkbox-success">
                    <input class="styled styled" id="checkbox10" type="checkbox" disabled checked>
                    <label for="checkbox10">
                        This too
                    </label>
                </div>
                <div class="checkbox checkbox-warning checkbox-circle">
                    <input class="styled" id="checkbox11" type="checkbox" disabled checked>
                    <label for="checkbox11">
                        And this
                    </label>
                </div>
            </fieldset>
        </div>
        </div>
        
        <div class="row">
        <div class="col-xs-5">
            <fieldset>
                <legend>
                    Basic
                </legend>
                <p>
                    Supports bootstrap brand colors: <code>.radio-primary</code>, <code>.radio-danger</code> etc.
                </p>
                <div class="row">
                    <div class="col-xs-6">
                        <div class="radio">
                            <input type="radio" name="radio1" id="radio1" value="option1" checked>
                            <label for="radio1">
                                Small
                            </label>
                        </div>
                        <div class="radio">
                            <input type="radio" name="radio1" id="radio2" value="option2">
                            <label for="radio2">
                                Big
                            </label>
                        </div>
                    </div>
                    <div class="col-xs-6">
                        <div class="radio radio-danger">
                            <input type="radio" name="radio2" id="radio3" value="option1">
                            <label for="radio3">
                                Next
                            </label>
                        </div>
                        <div class="radio radio-danger">
                            <input type="radio" name="radio2" id="radio4" value="option2" checked>
                            <label for="radio4">
                                One
                            </label>
                        </div>
                    </div>
                </div>
                <p>Radios without label text</p>
                <div class="radio">
                    <input type="radio" id="singleRadio1" value="option1" name="radioSingle1" aria-label="Single radio One">
                    <label></label>
                </div>
                <div class="radio radio-success">
                    <input type="radio" id="singleRadio2" value="option2" name="radioSingle1" checked aria-label="Single radio Two">
                    <label></label>
                </div>
                <p>Inline radios</p>
                <div class="radio radio-info radio-inline">
                    <input type="radio" id="inlineRadio1" value="option1" name="radioInline" checked>
                    <label for="inlineRadio1"> Inline One </label>
                </div>
                <div class="radio radio-inline">
                    <input type="radio" id="inlineRadio2" value="option2" name="radioInline">
                    <label for="inlineRadio2"> Inline Two </label>
                </div>
            </fieldset>
        </div>
        <div class="col-xs-4">
            <fieldset>
                <legend>
                    Disabled
                </legend>
                <p>
                    Disabled state also supported.
                </p>
                <div class="radio radio-danger">
                    <input type="radio" name="radio3" id="radio5" value="option1" disabled>
                    <label for="radio5">
                        Next
                    </label>
                </div>
                <div class="radio">
                    <input type="radio" name="radio3" id="radio6" value="option2" checked disabled>
                    <label for="radio6">
                        One
                    </label>
                </div>
            </fieldset>
        </div>
        </div>-->

        <div class="clearfix"></div>
      </div>
    </div> 
    
    <script>
      CKEDITOR.replace('text');
    </script>